<template>
	<view class="container">
		<scroll-view scroll-y class="content">
			<!-- 状态头部 -->
			<view class="status-header">
				<view class="status-box">
					<text class="status-text">{{ getStatusText(orderDetail.status) }}</text>
					<text class="status-time">{{formatTime(orderDetail.update_datetime)}}</text>
				</view>
				<view class="appointment-time">
					<text class="time-label">服务周期：</text>
					<text class="time-value">{{formatTimeRange(orderDetail.service_start)}} 至 {{formatTimeRange(orderDetail.service_end)}}</text>
				</view>
			</view>

			<!-- 服务地址 -->
			<view class="card">
				<view class="section-title">服务地址</view>
				<view class="address-content">
					<u-icon name="map" size="20"></u-icon>
					<view class="address-details">
						<text class="user-info">{{orderDetail.consignee}} {{orderDetail.phone}}</text>
						<text class="full-address">{{orderDetail.city}}{{orderDetail.district}}{{orderDetail.community}}{{orderDetail.address}}</text>
					</view>
				</view>
			</view>

			<!-- 服务项目 -->
			<view class="card">
				<view class="section-title">服务项目</view>
				<view class="service-item">
					<view class="service-info u-flex">
						<image class="project-l" mode="aspectFill" :src="orderDetail.project.cover_img" lazy-load />
						<text class="service-name">{{orderDetail.project.name}}（{{getProjectType(orderDetail.service_type)}}）</text>
					</view>
					<view class="price-info">
						<text class="original-price">¥{{orderDetail.market_price/100}}</text>
						<text class="discount">优惠¥{{orderDetail.market_price/100 - orderDetail.total_amount/100}}</text>
						<text class="final-price">¥{{orderDetail.total_amount/100}}</text>
					</view>
				</view>
<!-- 				<view class="coupon-info">
					<u-icon name="coupon" color="#FF5A5F" size="16"></u-icon>
					<text class="coupon-text">到位直选 6元代金券</text>
				</view> -->
			</view>

			<!-- 订单信息 -->
			<view class="card">
				<view class="section-title">订单信息</view>
				<view class="info-item">
					<text class="info-label">支付订单：</text>
					<text class="info-value">{{orderDetail.transaction_id}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">订单编号：</text>
					<text class="info-value">{{orderDetail.orderNo}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">下单时间：</text>
					<text class="info-value">{{orderDetail.create_datetime}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">服务周期：</text>
					<text class="info-value">{{getProjectType(orderDetail.service_type)}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">开始日期：</text>
					<text class="info-value">{{orderDetail.service_start}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">结束日期：</text>
					<text class="info-value">{{orderDetail.service_end}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">支付方式：</text>
					<text class="info-value">微信小程序</text>
				</view>
				<view class="info-item">
					<text class="info-label">备注：</text>
					<text class="info-value">{{orderDetail.remarks}}</text>
				</view>
				<!--                <view class="confirm-code">
                    <text class="code-label">服务确认码：</text>
                    <text class="code-value">8X5K2</text>
                </view> -->
			</view>

			<!-- 操作按钮 -->
<!-- 			<view class="action-buttons">
				<u-button plain shape="circle" customStyle="width:200rpx;height:70rpx;border-color:#ccc;color:#666" @click="handleComplain">投诉举报</u-button>
				<u-button type="error" shape="circle" customStyle="width:200rpx;height:70rpx;margin-left:20rpx" @click="handleConfirm">确认完成</u-button>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
import { getOrderDetail } from '@/apis/order_callback.js';
import store from '@/store';

export default {
	data() {
		return {
			orderId: 0,
			orderDetail: {}
		};
	},
	onLoad(e) {
		if (e.id) {
			this.orderId = e.id;
		}
		this.getOrderDetailOne(e.id);
	},
	methods: {
		// 项目类型文本映射
		getProjectType(type) {
			const typeMap = {
				day: '天',
				month: '月',
				quarter: '季',
				year: '年'
			};
			return typeMap[type] || type;
		},
		handleComplain() {
			uni.navigateTo({ url: '/pages/order/complain' });
		},
		handleConfirm() {
			this.$refs.uToast.show({
				type: 'success',
				message: '服务确认成功'
			});
		},
		getStatusText(status) {
			const statusMap = {
				pending: '待接单',
				assigned: '待服务',
				inProgress: '进行中',
				confirm: '待验收',
				completed: '已完成',
				refund: '退款中',
				refundFail: '退款失败',
				cancelled: '已取消'
			};
			return statusMap[status] || status;
		},
		formatTime(inputTime) {
		  // 创建日期对象
		  const date = new Date(inputTime);
		
		  // 获取月份、日期、小时、分钟
		  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始
		  const day = date.getDate().toString().padStart(2, '0');
		  const hours = date.getHours().toString().padStart(2, '0');
		  const minutes = date.getMinutes().toString().padStart(2, '0');
		
		  // 拼接成目标格式：MM-DD HH:mm
		  return `${month}-${day} ${hours}:${minutes}`;
		},
		formatTimeRange(timeRange) {
			if (!timeRange || typeof timeRange !== 'string') return '';
		
			// 按波浪号分割成开始时间和结束时间
			const times = timeRange.split('~');
			if (times.length !== 2) return timeRange; // 格式不正确就返回原值
		
			const start = times[0].trim(); // "2025-05-13 10:00:00"
			const end = times[1].trim(); // "2025-05-13 11:00:00"
		
			// 提取日期部分（前10位）和时间部分（后8位）
			const startDate = start.substring(0, 10); // "2025-05-13"
			const startTime = start.substring(11, 16); // "10:00"
			const endTime = end.substring(11, 16); // "11:00"
		
			// 组合输出格式
			return `${startDate} ${startTime}-${endTime}`;
		},
		async getOrderDetailOne(id) {
			store.commit('setLoadingShow', true);
			getOrderDetail(
				id,
				(res) => {
					this.orderDetail = res;
					store.commit('setLoadingShow', false);
				},
				(err) => {
					console.error('获取订单详情失败:', err);
					uni.showToast({
						title: '获取订单详情失败',
						icon: 'none'
					});
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
	
	@import '@/common/variables.scss'; // ✅ 必须引入
	
	.defColor{
		color:$main-color;
	}
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

.status-header {
	padding: 30rpx;
	background: linear-gradient(135deg, $main-color, $main-color-linear);
	color: #fff;

	.status-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.status-text {
			font-size: 36rpx;
			font-weight: bold;
		}

		.status-time {
			font-size: 28rpx;
		}
	}

	.appointment-time {
		display: flex;
		align-items: center;
		font-size: 28rpx;

		.time-label {
			opacity: 0.9;
		}

		.time-value {
			font-weight: 500;
		}
	}
}

.card {
	margin: 24rpx;
	padding: 30rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
}

.project-l {
	width: 150rpx;
	height: 150rpx;
	border-radius: 12rpx;
	overflow: hidden;
	margin-right: 20rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.address-content {
	display: flex;
	align-items: flex-start;

	.address-details {
		margin-left: 20rpx;

		.user-info {
			display: block;
			font-size: 30rpx;
			color: #333;
			margin-bottom: 12rpx;
		}

		.full-address {
			font-size: 28rpx;
			color: #666;
			line-height: 1.4;
		}
	}
}

.service-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;

	.service-info {
		.service-name {
			font-size: 30rpx;
			color: #333;
		}

		.service-spec {
			font-size: 26rpx;
			color: #999;
		}
	}

	.price-info {
		text-align: right;

		.original-price {
			display: block;
			font-size: 24rpx;
			color: #999;
			text-decoration: line-through;
		}

		.discount {
			display: block;
			font-size: 24rpx;
			color: #ff6600;
		}

		.final-price {
			font-size: 32rpx;
			color: #ff6600;
			font-weight: bold;
		}
	}
}

.coupon-info {
	display: flex;
	align-items: center;
	padding: 16rpx 0;
	border-top: 1rpx dashed #eee;

	.coupon-text {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #666;
	}
}

.info-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	font-size: 28rpx;

	.info-label {
		color: #999;
	}

	.info-value {
		color: #666;
	}
}

.confirm-code {
	margin-top: 30rpx;
	padding-top: 30rpx;
	border-top: 1rpx solid #eee;
	text-align: center;

	.code-label {
		font-size: 28rpx;
		color: #999;
	}

	.code-value {
		display: block;
		font-size: 48rpx;
		color: #ff5a5f;
		font-weight: bold;
		letter-spacing: 8rpx;
		margin-top: 16rpx;
	}
}

.action-buttons {
	display: flex;
	justify-content: flex-end;
	padding: 40rpx 24rpx;
	background: #fff;
}
</style>
